<template>
	<view class="status_bar">
		<!-- 这里是状态栏 -->
	</view>
	<view class="assetsManagement">
		<uni-nav-bar :border="false" left-icon="left" :right-icon="deleteFlag?'undo':'trash-filled'" @clickLeft="back"
			@clickRight="()=>{deleteFlag?deleteFnCnacel():deleteFn()}">
			<view class="title">
				<text class="text">资产管理</text>
			</view>
		</uni-nav-bar>
		<!-- 收支统计 -->
		<view class="income-and-expenditure-statistics">
			<uni-row>
				<uni-col :span="20">净资产</uni-col>
				<uni-col :span="4">
					<uni-icons :type="eyeType" size="35" color="#fff" @click="eyeChange"></uni-icons>
				</uni-col>
			</uni-row>
			<view class="income-and-expenditure-statistics-all-out">{{eyeChangeValue(total.netAsset)}}</view>
			<text class="income-and-expenditure-statistics-all-in"> 总资产
				{{eyeChangeValue(total.totalAssets)}}&emsp;|&emsp;总负债
				{{eyeChangeValue(total.grossLiability)}}</text>
		</view>
		<view class="title-and-add">
			<text>资产账户</text>
			<view class="new" @click="addAssets">
				<text class="text">新增资产</text>
			</view>
		</view>

		<view v-for="i in assets" class="list-item" @click="()=> deleteFlag?selectBook(i) :goTo('assetsDetail',i)">
			<view class="list-item-content">
				<uni-icons :type="i.icon" size="45"></uni-icons>
				<view class="list-item-content-view">
					<view>{{i.accountName}}</view>
					<text class="remark">{{i.time}}</text>
				</view>
			</view>
			<view class="money">
				<text>{{ eyeChangeValue(i.balance) }}</text>
				<uni-icons v-show="!deleteFlag" type="right" size="25"></uni-icons>
				<text v-show="deleteFlag">
					<uni-icons :type=" i.selected?'checkbox-filled':'checkbox'" size="25"></uni-icons>
				</text>


			</view>

		</view>

		<view v-show="deleteFlag" class="save-btn " @click=" doDeleteFn">
			<text class="save-btn-text">
				确认删除
			</text>
		</view>
		<!-- 	<view v-show="deleteFlag" class="save-btn cancel " @click="deleteFnCnacel">
			<text class="save-btn-text">
				取消
			</text>
		</view> -->
		<uni-popup ref="alertDialogRef" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="同意" title="提示" :content=" messageText "
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { assetsApi } from "@/apis/apis"
	import { onShow } from '@dcloudio/uni-app'

	const eyeType = ref('eye')
	const eyeChange = () => {
		eyeType.value = eyeType.value === 'eye' ? 'eye-slash' : 'eye'
	}

	const eyeChangeValue = (e : string) => {
		return eyeType.value === 'eye' ? e : "***"
	}


	const dialogConfirm = async () => {
		const idList = []
		assets.value.forEach((item : any) => item.selected && idList.push(item.id))
		let res : any = await assetsApi.deleteByIdsUsingDELETE({
			idList: idList.join(',')
		})

		if (res.code === 200) {
			uni.showToast({ title: res.msg, icon: 'success' });
			deleteFnCnacel()
			dialogClose()
			getAssets()
		}
	}
	const deleteFlag = ref(false)
	const messageText = `是否删除！`
	const alertDialogRef = ref(null)
	const deleteFn = () => {
		deleteFlag.value = true
	}

	const doDeleteFn = () => {
		alertDialogRef.value.open()
	}


	const selectBook = (e : any) => {
		e.selected = !e.selected
	}

	const dialogClose = () => {
		alertDialogRef.value.close()

	}
	const deleteFnCnacel = () => {
		deleteFlag.value = false
		assets.value.forEach((item : any) => item.selected = false)
	}


	const back = () => {
		uni.navigateBack()
	}


	const assets = ref([
		/* {
			accountName: '资产账户名称',
			balance: '+10.00',
			icon: 'wallet',
			time: '备注内容',
			selected: false

		} */
	])
	const SysUser = JSON.parse(uni.getStorageSync('SysUser') || '{}')
	// 初始化请求资产账户
	const getAssets = async () => {
		const res : any = await assetsApi.queryPageUsingPOST_2({ userId: SysUser.id })
		assets.value = res.data.records
	}

	const total = ref({
		"netAsset": 0,
		"totalAssets": 0,
		"grossLiability": 0

	})
	// 查询总资产和总负债
	const getTotal = async () => {
		const res : any = await assetsApi.queryUsingPOST({ userId: SysUser.id })
		total.value = res.data
	}

	onShow(() => {
		getTotal()
		getAssets()
	});

	// 新增资产
	const addAssets = () => {
		uni.navigateTo({
			url: `/pages/assetsManagement/addAssets/addAssets`
		})
	}

	const goTo = (type : string, i : { accountName : string, bankName : string }) => {
		uni.navigateTo({
			url: `/pages/assetsManagement/${type}/${type}?accountName=${i.accountName}&bankName=${i.bankName}&assetsId=${i.id}`
		})
	}
</script>

<style lang="scss" scoped>
	$nav-height: 44px;

	.assetsManagement {
		padding: 5px 20px 0;

		.title {
			width: 100%;

			text-align: center;
			height: $nav-height;
			line-height: $nav-height;

			.text {
				font-size: 16px;
			}
		}

		// 收支统计
		.income-and-expenditure-statistics {
			margin: 0 auto 10px;
			padding: 15px;
			background-color: #c5ccd1;
			border-radius: 8px;

			.income-and-expenditure-statistics-header {
				margin-bottom: 20px;

				.income-and-expenditure-statistics-header-title {
					font-size: 22px;
				}
			}

			.income-and-expenditure-statistics-all-out {
				margin-bottom: 20px;
				font-size: 30px;
			}

			.income-and-expenditure-statistics-all-in {
				margin-bottom: 20px;
			}

		}

		.title-and-add {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			.new {
				width: 125px;
				height: 34px;

				text-align: center;
				background-color: #000;
				color: rgba(255, 255, 255, 1);
				border-radius: 37px;

				.text {
					line-height: 34px;
				}
			}
		}


		.uni-list-view-container {
			height: 800px
		}

		// 明细列表
		.list-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			border: 1px solid #939597;
			margin-bottom: 10px;
			border-radius: 5px;

			.list-item-content {
				display: flex;
				flex-direction: row;
				align-items: center;

				.list-item-content-view {
					margin-left: 10px;

					.remark {
						color: #939597;
					}
				}
			}

			.money {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}

	}

	/* .cancel {
		bottom: 80px;
		background-color: #939597;
	} */
</style>